<script lang="ts" setup>
import { ref, onMounted, reactive } from 'vue'
import { ElMessage } from 'element-plus'
import dgd from './tabs/dgd.vue'
import ygd from './tabs/ygd.vue'
import tgjl from './tabs/tgjl.vue'
import xtpzService from '@/api/xtpz'
import TreeUtilDTO from '@/utils/tree'
import { useRoute } from 'vue-router'
import router from '@/router'
import { useMainStore } from '@/store/main'
const store = useMainStore()
const loading = ref<boolean>(false)
const route = useRoute()
const activeName = ref((route.query.prePage as string) || 'dgd')

// 数据源
const optionsObj = ref<any>({
  ajlbbms: [],
  cbbmbms: [],
})

onMounted(() => {
  // 获取案件类别
  getAjlb()
  // 获取权限部门
  queryDlrsjqx()
})

const dgdRef = ref<InstanceType<typeof dgd>>()
const ygdRef = ref<InstanceType<typeof ygd>>()

let tabsList = reactive([
  {
    label: '待归档',
    name: 'dgd',
    closable: false,
  },
  {
    label: '已归档',
    name: 'ygd',
    closable: false,
  },
])
const tgjlTabRowData = ref('')
if (activeName.value === 'tgjl') {
  const data = JSON.parse(route.query.cs as string)
  tabsList.push({
    label: '退改记录',
    name: 'tgjl',
    closable: true,
  })
  tgjlTabRowData.value = { ...data, path: '/ajgd' }
}
if (['wtj', 'yth', 'tgz', 'ytj'].includes(activeName.value)) {
  activeName.value = 'dgd'
}
const removeTabs = () => {
  tabsList = tabsList.filter((item) => {
    return item.name !== activeName.value
  })
  router.replace('/ajgd')
  activeName.value = 'ygd'
}

/*
 * 添加退改记录tab页
 */
const addTgjlTab = (data: any) => {
  if (!tabsList.find((tab) => tab.name === 'tgjl')) {
    tabsList.push({
      label: '退改记录',
      name: 'tgjl',
      closable: true,
    })
  }
  tgjlTabRowData.value = { ...data, path: '/ajgd' }
  activeName.value = 'tgjl'
}

/*
 * 获取案件类别
 */
const getAjlb = () => {
  xtpzService
    .queryAjlblb()
    .then((res) => {
      if (res) {
        optionsObj.value.ajlbbms = TreeUtilDTO.getTreeData(res.data || [], 'dm', 'fdm')
      }
    })
    .catch((err) => {
      !err.isError && ElMessage({ type: 'warning', message: err.message })
    })
    .finally(() => {
      loading.value = false
    })
}

// 获取权限配置
const queryDlrsjqx = () => {
  xtpzService.getDlrsjqx({}).then((res: any) => {
    const dwbm = store.userInfo.dwbm
    const dw = (res.data.sqdwxxList || []).find((dw: any) => dw.dwbm === dwbm)
    optionsObj.value.cbbmbms = (dw?.sqbmxxList || []).map((el: any) => {
      return {
        dm: el.bmbm,
        mc: el.bmmc,
      }
    })
  })
}
</script>
<template>
  <div class="container" v-loading="loading">
    <!-- type="border-card" -->
    <el-tabs type="card" v-model="activeName" @tab-remove="removeTabs">
      <el-tab-pane
        v-for="item in tabsList"
        :key="item.name"
        :label="item.label"
        :name="item.name"
        :closable="item.closable"
        lazy
      >
        <dgd
          ref="dgdRef"
          v-if="activeName === 'dgd' && item.label === '待归档'"
          :optionsObj="optionsObj"
          @addTgjlTab="addTgjlTab"
        ></dgd>
        <ygd
          ref="ygdRef"
          v-if="activeName === 'ygd' && item.label === '已归档'"
          :optionsObj="optionsObj"
          @addTgjlTab="addTgjlTab"
        ></ygd>
        <tgjl
          ref="tgjlRef"
          v-if="activeName === 'tgjl' && item.label === '退改记录'"
          :paramsData="tgjlTabRowData"
        ></tgjl>
      </el-tab-pane>
      <!-- <el-tab-pane label="待归档" name="dgd" lazy>
        <dgd ref="dgdRef"></dgd>
      </el-tab-pane>
      <el-tab-pane label="已归档" name="ygd" lazy>
        已归档
        <ygd ref="ygdRef"></ygd>
      </el-tab-pane>
      <el-tab-pane label="退改记录" name="tgjl" lazy closable>
        退改记录
        <ygd ref="tgjl"></ygd>
      </el-tab-pane> -->
    </el-tabs>
  </div>
</template>
<style lang="scss" scoped>
.container {
  width: 100%;
  height: 100%;
  background-color: #fff;
}
</style>
